<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>达达微博 · 详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>        body {
        margin: 0;
        font-family: 'Comic Sans MS', cursive, sans-serif;
        background-image: url('https://images.unsplash.com/photo-1592194996308-7b43878e84a6?ixlib=rb-4.0.3&auto=format&fit=crop&w=1400&q=80');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        color: #333;
    }
    .overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: -1;
    }
    .card {
        border: none;
        border-radius: 1rem;
        background-color: #fff9f0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .container {
        max-width: 600px;
        margin-top: 5rem;
    }
    footer {
        background-color: #ffe6e6;
        text-align: center;
        padding: 1rem;
        margin-top: 2rem;
        font-style: italic;
    }
    </style>
</head>
<body>

<div class="overlay"></div>

<nav class="navbar navbar-expand-lg navbar-custom shadow-sm mb-4">
    <div class="container-fluid">
        <a class="navbar-brand fw-bold" href="/">
            <i class="fas fa-cat me-2" style="color: #ff9999;"></i> 达达微博
        </a>
    </div>
</nav>

<div class="container">
    <div class="card p-3 mb-4">
        <h4 class="mb-1">
            <span style="color:darkred">{{ weibo.nickname }}</span>: {{ weibo.content }}
        </h4>
        <small>发布于：{{ weibo.created }}</small>
    </div>

    <h5 class="mt-4 mb-3">评论区：</h5>
    <div v-for="c in arr" class="card p-3 mb-2">
        <h6 class="mb-1">
            <span style="color:red">{{ c.nickname }}</span> 评论道：
        </h6>
        <p class="mb-1">{{ c.content }}</p>
        <small>发布于：{{ c.created }}</small>
    </div>

    <textarea class="form-control mt-3" rows="3" v-model="comment.content" placeholder="输入评论内容..."></textarea>
    <button class="btn btn-success mt-2 btn-custom" @click="insert">发表评论</button>
</div>

<footer>
    &copy; 2025 达达微博 · 猫咪特别版 ❤️
</footer>

<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>    let v = new Vue({
    el: ".container",
    data: {
        weibo: {},
        comment: { content: "" },
        arr: []
    },
    methods: {
        insert() {
            this.comment.weiboId = this.weibo.id;
            axios.post("/v1/comment/insert", this.comment).then(response => {
                if (response.data == 1) {
                    location.reload();
                } else {
                    alert("请先登录");
                    location.href = "/login.html";
                }
            });
        }
    },
    created() {
        const search = location.search;
        axios.get("/v1/weibo/selectById" + search).then(res => {
            this.weibo = res.data;
        });
        axios.get("/v1/comment/selectByWeiboId" + search).then(res => {
            this.arr = res.data;
        });
    }
});
</script>
</body>
</html>